import { Component, Input,forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl } from '@angular/forms';

@Component({
  selector: 'task-image-list-select',
  templateUrl: './image-list-select.component.html',
  styleUrls: ['./image-list-select.component.scss'],
  providers:[
    {
      provide:NG_VALUE_ACCESSOR, // 将自己注册到NG_VALUE_ACCESSOR令牌上
      useExisting:forwardRef(()=>ImageListSelectComponent), // useExisting 用已有的 使用forwardRef就可以使用自己了 
      multi:true // NG_VALUE_ACCESSOR一般都是多对应的所以需要加multi属性
    },
    {
      provide:NG_VALIDATORS, // 可验证的
      useExisting:forwardRef(()=>ImageListSelectComponent), // useExisting 用已有的 使用forwardRef就可以使用自己了 
      multi:true // NG_VALUE_ACCESSOR一般都是多对应的所以需要加multi属性
    }
  ]
})
export class ImageListSelectComponent implements ControlValueAccessor { // 实现ControlValueAccessor接口
  @Input() title = "选择";
  @Input() cols = 6;
  @Input() rowHeight = '64px';
  @Input() items:string[] = [];
  @Input() useSvgIcon:boolean = false;
  @Input() itemWidth:string = '80px';
  selected:string;

  constructor() { }
  private propagateChange =  (_:any) => {}; // 定义一个空的函数体
  onChange(i){
    this.selected = this.items[i];
    this.propagateChange(this.selected); // 将选择图片的变化发送回去 通知表单
  }
  // 实现接口ControlValueAccessor中的三个方法
  writeValue(obj:any):void{ // 写入值
    this.selected = obj;
  }
  registerOnChange(fn:any):void{
    this.propagateChange = fn; // 将系统注册的函数句柄得到
  }
  registerOnTouched(fn:any):void{ // 已经聚焦过了

  }
  validate(c:FormControl):{[key:string]:any}{
    return this.selected?null:{
        imageListInvalid:{
          valid:false
        }
    }
  }
}
